﻿@using Kugar.UI.Web.AdminLTE
@model Kugar.UI.Web.AdminLTE.Models.Model_Login
@{
    Layout = null;
    var baseUrl = AdminLTEUI.LayoutPath.ResourceBaseUrl;

    var subTitle = Model.Subtitle;
    if (string.IsNullOrWhiteSpace(subTitle))
    {
        subTitle = Model.Title;
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>@Model.Title</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Bootstrap 3.3.7 -->
    <link href="@(AdminLTEUI.LayoutPath.ResourceBaseUrl)/Content/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="@(AdminLTEUI.LayoutPath.ResourceBaseUrl)/Content/lib/html5shiv/html5.min.js"></script>
        <script src="@(AdminLTEUI.LayoutPath.ResourceBaseUrl)/Content/lib/respond/respond.min.js"></script>
    <![endif]-->
    <!-- Google Font -->
    <link href="@(AdminLTEUI.LayoutPath.ResourceBaseUrl)/Content/lib/adminlte/css/fontcss.css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" rel="stylesheet" />

    <style>
        * {
            box-sizing: border-box;
        }

        html {
            height: 100%;
            width: 100%;
        }

        body {
            margin: 0;
            height: 100%;
            width: 100%;
            color: #333;
            font-size: 14px;
            font-weight: normal;
            background-color: #fff;
            background-repeat: repeat;
            background-position: center;
            overflow: hidden;
        }

        form {
            height: 100%;
            width: 100%;
            text-align: center;
        }

            form:after {
                content: '';
                width: 0;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

        .login-box {
            width: 425px;
            padding: 0 34px;
            text-align: center;
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

        .login-title-box {
            display: inline-block;
            height: 64px;
            margin-bottom: 20px;
        }

        .login-logo {
            width: 64px;
            height: 64px;
            margin-right: 20px;
            float: left;
        }

        .login-title {
            display: inline-block;
            color: #fff;
            font-size: 35px;
            line-height: 64px;
            height: 64px;
        }

        .login-img-box {
            margin-bottom: 20px;
        }

            .login-img-box img {
                width: 100%;
            }

        .login-info-box {
            width: 357px;
            height: @(string.IsNullOrWhiteSpace(Model.RegisterUrl) && string.IsNullOrWhiteSpace(Model.ForgetpasswordUrl)? "310":"325")px;
            background-color: rgba(255,255,255,0.3);
            border-radius: 20px;
            padding: 40px 30px;
        }

            .login-info-box > div {
                height: 40px;
                margin-bottom: 20px;
            }

        .login-info-box > div:last-child {
            height: 15px;
        }

        .login-ico {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-repeat: no-repeat;
            background-position: left center;
            float: left;
        }

        .login-info-box input {
            height: 40px;
            border: 0;
            outline: 0;
            float: left;
            padding: 10px;
            background-color: #fff;
            color: #117caf;
            font-size: 15px;
        }

        .login-account-box input,
        .login-password-box input {
            width: 257px;
        }

        .login-validate-box input {
            width: 157px;
        }

        .login-validate-box img {
            float: left;
            height: 40px;
            width: 100px;
            cursor: pointer;
        }

        .login-btn-box {
            width: 425px;
            height: 50px;
            background-color: #44999e;
            background: linear-gradient(to right, #44999e, #428bae);
            background: -webkit-linear-gradient(left, #44999e, #428bae);
            background: -o-linear-gradient(left, #44999e, #428bae);
            background: -moz-linear-gradient(left, #44999e, #428bae);
            position: absolute;
            left: 0;
            bottom: 40px;
        }

            .login-btn-box:before,
            .login-btn-box:after {
                content: ' ';
                display: block;
                width: 0;
                height: 0;
                border-style: solid;
                position: absolute;
                top: 50px;
            }

            .login-btn-box:before {
                border-width: 0 34px 17px 0;
                border-color: transparent #246165;
                left: 0;
            }

            .login-btn-box:after {
                border-width: 0 0 17px 34px;
                border-color: transparent #24566f;
                right: 0;
            }

            .login-btn-box button {
                background: transparent;
                border: 0;
                outline: 0;
                width: 100%;
                height: 100%;
                color: #fff;
                font-size: 24px;
            }

            .login-register-link {
                float: left;
                margin-left: 10px;
            }

            .login-validate-box {
                margin-bottom: 10px
            }

            .login-forgetpw-link {
                float: right;
                margin-right: 10px
            }
    </style>
</head>
<body style="background-image: url('@(baseUrl)/Content/images/login_background.jpg');">
    <form method="post">
        <div class="login-box">
            @if (Model.ViewType == 0)
            {
            <div class="login-title-box clearfix">
                @if (!string.IsNullOrWhiteSpace(Model.LogoImageUrl))
                {
                    <img class="login-logo" src="@Model.LogoImageUrl" />
                }

                <div class="login-title">@Html.Raw(subTitle)</div>
            </div>
            }
            else if (Model.ViewType == 1)
            {
                <div class="login-img-box">
                    <img src="@Model.LogoImageUrl" />
                </div>
            }
                <div class="login-info-box">
                    <div class="login-account-box clearfix">
                        <span class="login-ico" style="background-image: url('@(baseUrl)/Content/images/login_user.png');"></span>
                        <input type="text" placeholder="请输入用户名" name="UserName" value="@Model.UserName" required />
                    </div>
                    <div class="login-password-box clearfix">
                        <span class="login-ico" style="background-image: url('@(baseUrl)/Content/images/login_pwd.png');"></span>
                        <input type="password" placeholder="请输入密码" name="Password" value="@Model.Password" required />
                    </div>
                    <div class="login-validate-box clearfix" style="margin-bottom: 10px;">
                        <span class="login-ico" style="background-image: url('@(baseUrl)/Content/images/login_validate.png');"></span>
                        <input type="text" placeholder="请输入验证码" name="VerificationCode" required />
                        <img src="/AdminCore/AdminLogin/VerificationCode" onclick="this.src = '/AdminCore/AdminLogin/VerificationCode?_=' + (new Date()).getTime();" />
                    </div>
                    @if (!string.IsNullOrWhiteSpace(Model.RegisterUrl))
                    {
                        <a href="@Model.RegisterUrl" class="login-register-link">@Model.RegisterTitle</a>
                    }

                    @if (!string.IsNullOrWhiteSpace(Model.ForgetpasswordUrl))
                    {
                        <a href="@Model.RegisterUrl" class="login-forgetpw-link">@Model.ForgetpasswordTitle</a>
                    }
                    
                    <div class="clearfix"></div>
                </div>
            <div class="login-btn-box">
                <button type="submit">立即登录</button>
            </div>
        </div>
    </form>

    <!-- jQuery 3 -->
    <script src="@(AdminLTEUI.LayoutPath.ResourceBaseUrl)/Content/lib/jquery/jquery.min.js"></script>

    <!-- Bootstrap 3.3.7 -->
    <script src="@(AdminLTEUI.LayoutPath.ResourceBaseUrl)/Content/lib/bootstrap/js/bootstrap.min.js"></script>

    @if (!string.IsNullOrWhiteSpace(Model.Msg))
    {
        <script src="@(AdminLTEUI.LayoutPath.ResourceBaseUrl)/Content/lib/layui/layui.js" charset="utf-8"></script>

        <script>
            layui.use(['layer'], function () {
                layui.layer.alert('@Model.Msg');
            });
        </script>
    }

</body>
</html>